<template>
    <div class="deposit-page">
        <TopTitleExit title="Deposit" :exit="routerExit" :has_right_btn="true" right_btn_icon="/icon/record.svg" :btnClick="() => { routerTo('/deposit/deposit_record') }"></TopTitleExit>
        <div class="body">
            <div class="qr-line">
                <div class="qr-box">
                    <div class="icon" style="--icon: url(/tmp/tmp-qr.png)"></div>
                    <div class="icon logo" style="--icon: url(/Demo-Favicon.ico)"></div>
                </div>
            </div>
            <div class="url-line">
                <div class="url-box">
                    <div class="text">https://xxx.xxx.xxx/xxx</div>
                    <div class="icon copy-btn" style="--icon: url(/icon/copy.svg)"></div>
                </div>
                <div class="text-box">
                    <div class="text">This address can only accept ETH-ERC20 and ERC721 assets, please verify carefully.</div>
                </div>
            </div>
            <div class="select-line">
                <div class="select-box" tabindex="0" @focusin="focusin" @focusout="focusout">
                    <div class="active-item">
                        <div class="select-item">
                            <div class="icon" :style="`--icon: url(${ active_network.icon })`"></div>
                            <div class="name">{{ active_network.name }}</div>
                            <div class="text">{{ active_network.text }}</div>
                        </div>
                    </div>
                    <div class="select-list" v-show="show_network_selector">
                        <div class="select-item" v-for="item in show_network_list" :key="item.id" @click.stop="changeNetwork(item)">
                            <div class="icon" :style="`--icon: url(${ item.icon })`"></div>
                            <div class="name">{{ item.name }}</div>
                            <div class="text">{{ item.text }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-line">
                <div class="text">1. This is your newest and unique address, platform will never ask you to transfer funds to another account or ask for your verification code.</div>
                <div class="text">2. The deposit requires at least 10 network blocks for confirmation. After confirmation, your account will automatically receive the funds.</div>
            </div>
        </div>
        <!-- <div class="footer">
            <div class="btn-box" @click="depositService.deposit">
                <div class="btn">Deposit Now ${{ depositPage.amount }}</div>
            </div>
        </div> -->
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { depositPage, depositService } from '@/service/deposit.js';
import { userInfo } from '@/service/user.js';
import { routerExit, routerTo } from '@/utils/jump';
import { computed, ref } from 'vue';

const select_list = [
    { id: 1, value: 100 },
    { id: 2, value: 500 },
    { id: 3, value: 1000 },
    { id: 4, value: 2000 },
    { id: 5, value: 5000 },
    { id: 6, value: 10000 },
];

function changeFile(e) {
    let file = e.target.files[0];
    if (!file) return;
    depositPage.fileObj.file = file;
    const reader = new FileReader();
    reader.onload = function(e) {
        depositPage.fileObj.base64 = e.target.result;
    };
    reader.onerror = function() {
        console.error('文件读取失败');
        depositPage.fileObj.file = null;
    };
    reader.readAsDataURL(file);
}

// 控制下拉框的逻辑如下
const network_list = [
    {
        id: 1,
        name: 'USDT-TRC20',
        text: 'Tether',
        icon: '/network/USDT.svg',
    },
    {
        id: 2,
        name: 'USDT-ERC20',
        text: 'Tether',
        icon: '/network/USDT.svg',
    },
    {
        id: 3,
        name: 'BTC',
        text: 'Bitcoin',
        icon: '/network/Bitcoin.svg',
    },
    {
        id: 4,
        name: 'ETH',
        text: 'Ethereum',
        icon: '/network/Ethereum.svg',
    },
];

const show_network_list = computed(() => {
    let res = [];
    for (let i = 0; i < network_list.length; i++) {
        let item = network_list[i];
        if (active_network.value.id != item.id) res.push({
            id: item.id,
            name: item.name,
            text: item.text,
            icon: item.icon,
        });
    }
    return res;
});

const active_network = ref(network_list[0]);

const show_network_selector = ref(false);

function focusin() {
    show_network_selector.value = true;
}

function focusout() {
    show_network_selector.value = false;
}

function changeNetwork(item) {
    // 修改数据
    active_network.value = item;
    // 强行失焦
    const el = document.querySelector('.select-box');
    el.blur();
}
</script>

<style scoped lang="less">
.deposit-page {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    
    .body {
        box-sizing: border-box;
        padding: 5vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;

        .qr-line {
            box-sizing: border-box;
            width: 100%;

            .qr-box {
                --size: 60vw;
                width: var(--size);
                height: var(--size);
                margin: 0 auto;
                border-radius: 3vw;
                background-color: #fff;
                box-shadow: 0 0 4vw rgba(0, 0, 0, 0.1);
                position: relative;

                .icon {
                    --isize: calc(var(--size) * 0.85);
                    --w: var(--isize);
                    --h: var(--isize);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    &.logo {
                        --lsize: calc(var(--isize) * 0.2);
                        --w: var(--lsize);
                        --h: var(--lsize);
                    }
                }
            }
        }

        .url-line {
            box-sizing: border-box;
            width: 100%;

            .url-box {
                box-sizing: border-box;
                width: 100%;
                height: 8vw;
                border-radius: 1.5vw;
                padding: 2vw 3vw;
                background-color: var(--bg-strong-color);
                display: flex;
                align-items: center;

                .text {
                    flex: 1;
                    font-size: 3vw;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .copy-btn {
                    --size: 3.5vw;
                    --w: var(--size);
                    --h: var(--size);
                }
            }

            .text-box {
                margin-top: 2vw;

                .text {
                    font-size: 3vw;
                    padding: 0 2vw;
                    color: var(--text-light-color);
                }
            }
        }

        .select-line {
            width: 100%;
            height: 13vw;
            background-color: var(--bg-strong-color);
            border-radius: 2vw;

            .select-box {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                padding: 2vw 4vw;
                position: relative;

                &::after {
                    content: '';
                    display: block;
                    --size: 2vw;
                    width: var(--size);
                    height: var(--size);
                    border-right: 0.3vw solid var(--text-color);
                    border-bottom: 0.3vw solid var(--text-color);
                    position: absolute;
                    top: 50%;
                    right: 5vw;
                    transform: translateY(-50%) rotate(45deg);
                }

                .active-item {
                    width: 100%;
                    height: 100%;

                    .select-item {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        gap: 3vw;

                        .icon {
                            --size: 6.5vw;
                            --w: var(--size);
                            --h: var(--size);
                        }

                        .name {
                            font-size: 3.5vw;
                            font-weight: 600;
                        }

                        .text {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }
                }

                .select-list {
                    width: 100%;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    background-color: var(--bg-color);

                    .select-item {
                        box-sizing: border-box;
                        width: 100%;
                        height: 100%;
                        padding: 3vw 4vw;
                        display: flex;
                        align-items: center;
                        gap: 3vw;

                        .icon {
                            --size: 6.5vw;
                            --w: var(--size);
                            --h: var(--size);
                        }

                        .name {
                            font-size: 3.5vw;
                            font-weight: 600;
                        }

                        .text {
                            font-size: 3vw;
                            color: var(--text-light-color);
                        }
                    }
                }
            }
        }

        .footer-line {
            box-sizing: border-box;
            width: 100%;
            padding: 4vw;
            border-radius: 2vw;
            box-shadow: 0 0 5vw rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            gap: 3vw;

            .text {
                font-size: 3vw;
                color: var(--text-color);
            }
        }
    }

    // .footer {
    //     box-sizing: border-box;
    //     width: 100%;
    //     background-color: #fff;
    //     position: fixed;
    //     left: 0;
    //     bottom: 0;
    //     padding: 4vw;
    //     // border-top: 0.1vw solid var(--border-color);

    //     .btn-box {
    //         width: 100%;
    //         display: flex;
    //         gap: 2vw;

    //         .btn {
    //             flex: 1;
    //             height: 10vw;
    //             border-radius: 1.5vw;
    //             display: flex;
    //             justify-content: center;
    //             align-items: center;
    //             background: var(--active-color);
    //             font-size: 3.5vw;
    //             font-weight: 600;
    //             color: #fff;
    //         }
    //     }
    // }
}
</style>